<template>
  <div class="myswiper">
    <div class="swiper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <slide v-for="(item, index) in banners" :key="index">
          <a :href="item.link">
            <img :src="item.image" @load="imgLoad" alt="" />
          </a>
        </slide>
      </swiper>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// swiper
import "swiper/dist/css/swiper.css";
import swiper from "vue-awesome-swiper/src/swiper.vue";
import slide from "vue-awesome-swiper/src/slide.vue";
import { getHomeMultidata } from "../../network/home.js";
export default {
  name: "myswiper",
  components: {
    swiper,
    slide,
  },
  data() {
    return {
      //首页轮播
      //保存路弄图的数组
      banners: [],

      //swiper
      swiperOptions: {
        loop: true,
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
          hideOnClick: false, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。
        },
        autoplay: {
          delay: 3000,
        },
      },
    };
  },
  created() {
    // 1.请求多个数据
    this.getHomeMultidata();
  },
  //网络请求
  methods: {
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        console.log(this.banners);
        this.recommends = res.data.recommend.list;
      });
    },
  },
};
</script>

<style>
.swiper-wrapper {
  height: 200px;
}
.swiper {
  position: relative;
  width: 100%;
  height: 200px;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.slide {
  width: 100%;
  height: 0;
  padding-bottom: 28.1%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.swiper-pagination {
  bottom: 0;
  background-color: #f29b76;
  width: 100%;
  opacity: 0.6;
}
</style>